<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/goods/goodsList' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1 font-size-15px font-bold color-#5E5E69">数据列表</div>
      <div class="flex justify-between">
        <el-button
          size="default"
          class="small-btn !border-rd-20px !pl-50px !pr-50px"
          color="#397dfd"
          type="primary"
          @click="handleOpen('add')"
        >
          添加
        </el-button>
      </div>
    </div>
    <!-- 页面 -->
    <div class="mt-40px pl-10px pr-10px pb-20px">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="编号" align="center" />
        <el-table-column prop="sex" align="center" label="分类名称">
          <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column property="phone" align="center" label="级别" />
        <el-table-column property="school" align="center" label="商品数量" />
        <el-table-column property="school" align="center" label="数量单位" />
        <el-table-column property="school" align="center" label="导航栏">
          <template #default="scope"><el-switch v-model="scope.row.school" /></template>
        </el-table-column>
        <el-table-column property="school" align="center" label="是否显示">
          <template #default="scope"><el-switch v-model="scope.row.school" /></template>
        </el-table-column>
        <el-table-column property="school" align="center" label="是否首页显示">
          <template #default="scope"><el-switch v-model="scope.row.school" /></template>
        </el-table-column>
        <el-table-column property="school" align="center" label="排序" />
        <el-table-column align="center" label="设置">
          <template #default>
            <div class="reset-btn reset-btn-samll font-size-12px font-bold">查看下级</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default>
            <el-space>
              <el-button
                size="small"
                class="small-btn !border-rd-20px"
                color="#397dfd"
                type="primary"
                @click="handleOpen('eidt')"
              >
                编辑
              </el-button>
              <el-popconfirm
                teleported
                width="200"
                title="是否要删除该学生？"
                confirm-button-text="是"
                cancel-button-text="否"
              >
                <template #reference>
                  <el-icon size="24" color="#3B82FD" class="cursor-pointer"><Delete /></el-icon>
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddCateModel ref="addCateModelRef" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import AddCateModel from './components/addCateModel.vue'
const formInline = reactive({
  code: '',
  school: '',
  type: '',
  status: '',
  chooseDate: 1,
  date: ''
})
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
])
interface User {
  name: string
  sex: string
  phone: string
  school: string
  grand: string
  date: string
}
const tableData: User[] = [
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  },
  {
    name: 'Tom',
    sex: 1,
    phone: '123456789',
    school: '学校1',
    grand: '一年级1班',
    date: '2016-05-03'
  }
]
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
}
const addCateModelRef = ref(null)
const handleOpen = (type: string) => {
  addCateModelRef.value.show(true)
}
</script>

<style scoped lang="scss">
.screen {
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding: 1px 8px !important;
    border-radius: 20px;
  }
  :deep(.el-select__wrapper) {
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 20px;
  }
  :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    border-bottom: none !important;
  }
  :deep(.el-table thead th) {
    background: #eaeaea;
  }
  :deep(.el-table thead th .cell) {
    font-weight: bold;
    color: #5e5e69;
    font-size: 15px;
  }
  :deep(.el-table .cell) {
    padding: 5px 10px !important;
  }
  :deep(.el-table) {
    border-radius: 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  }
}
.operate {
  div {
    background: #409eff;
    color: #fff;
    font-weight: bold;
    box-shadow: 4px 0px 16px 0px rgba(0, 0, 0, 0.3);
  }
  div:first-child {
    border-radius: 30px 10px 10px 30px;
  }
  div:last-child {
    border-radius: 10px 30px 30px 10px;
  }
}
</style>
